<template>
  <div style="display: flex" class="menmuStyle tempxyz">
    <CCard class="leftCard" style>
      <div class="manageBtn" style>
        <!-- <CButton
          v-c-tooltip="'添加节点'"
          title="添加节点"
          variant="outline"
          color="rgb(2,40,88)"
          @click="addTreeNode"
          data-permission="Btn_TaskType_AddR"
        >
          <img class="featuresstyle" src="@/assets/icons/增加同级.svg" alt />
        </CButton>
        <CButton
          v-c-tooltip="'删除树节点'"
          title="删除树节点"
          variant="outline"
          color="rgb(2,40,88)"
          @click="delTreeNode"
          style="margin-left: 6px"
          data-permission="Btn_TaskType_DelR"
        >
          <img class="featuresstyle" src="@/assets/icons/delete.svg" alt />
        </CButton> -->
        <CButton
          title="添加同级"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="addSameTreeNode"
          data-permission="Btn_TaskType_AddR"
        >
          添加同级
        </CButton>
        <CButton
          title="添加子级"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="addTreeNode"
          data-permission="Btn_TaskType_AddR"
        >
          添加子级
        </CButton>
        <CButton
          title="删除节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="delTreeNode"
          data-permission="Btn_TaskType_DelR"
        >
          删除节点
        </CButton>
      </div>
      <div class="taskType-treeDiv">
        <ul id="taskTypeTree" class="ztree customStyleZtree"></ul>
      </div>
    </CCard>

    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">{{ name }}列表</span>
        </div>
        <div class="header-right-wraper">
          <CButton
            color="info"
            @click="addCatalog"
            class="system-btn-style"
            data-permission="Btn_TaskType_Add"
          >
            <CIcon name="cil-plus" />&nbsp;任务类型
          </CButton>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
            <template v-slot:show_details="item">
              <CButton
                title="选择生产线"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="lookProductionLine(item.data.row)"
                data-permission="Btn_TaskType_Sel"
                >选择生产线</CButton
              >
              <CButton
                title="编辑"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="update(item.data.row)"
                data-permission="Btn_TaskType_Up"
                >编辑</CButton
              >
              <CButton
                title="删除"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="del(item.data.row.id)"
                data-permission="Btn_TaskType_Del"
                >删除</CButton
              >
            </template>
          </TableList>
        </div>
      </CCardBody>

      <!--  <div class="taskTypeManage borderStyle">
          <CDataTable :items="data" :fields="fields" hover border>
            <template #show_details="{ item }">
              <td class="py-2" align="center">
                &lt;!&ndash; <CButton
                  v-c-tooltip="'选择生产线'"
                  title="选择生产线"
                  variant="outline"
                  style="margin-right: 5px"
                  @click="lookProductionLine(item)"
                  data-permission="Btn_TaskType_Sel"
                >
                  <CIcon
                    class="featuresstyle colortempstyle"
                    name="cil-line-spacing"
                  />
                </CButton>
                <CButton
                  v-c-tooltip="'编辑'"
                  title="编辑"
                  color="rgb(2,40,88)"
                  variant="outline"
                  style="margin-right: 5px"
                  @click="update(item)"
                  data-permission="Btn_TaskType_Up"
                >
                  <img
                    class="featuresstyle"
                    src="@/assets/icons/edit.svg"
                    alt
                  />
                </CButton>
                <CButton
                  v-c-tooltip="'删除'"
                  title="删除"
                  color="rgb(2,40,88)"
                  variant="outline"
                  style="margin-right: 5px"
                  @click="del(item.id)"
                  data-permission="Btn_TaskType_Del"
                >
                  <img
                    class="featuresstyle"
                    src="@/assets/icons/delete.svg"
                    alt
                  />
                </CButton> &ndash;&gt;
                <CButton
                  title="选择生产线"
                  variant="outline"
                  class="textBtnStyle"
                  @click="lookProductionLine(item)"
                  data-permission="Btn_TaskType_Sel"
                >
                选择生产线
                </CButton>
                <CButton
                  title="编辑"
                  variant="outline"
                  class="textBtnStyle"
                  @click="update(item)"
                  data-permission="Btn_TaskType_Up"
                >
                编辑
                </CButton>
                <CButton
                  title="删除"
                  variant="outline"
                  class="textBtnStyle"
                  @click="del(item.id)"
                  data-permission="Btn_TaskType_Del"
                >
                删除
                </CButton>
              </td>
            </template>
          </CDataTable>
        </div>
      </CCardBody>
      <CCardFooter class="pageLink">
        <CRow>
          <CCol class="footerPage" style>
            <span class="pageContent">
              每页
              <CSelect
                @change="getVendorId($event)"
                :options="[10, 15, 20, 25]"
                v-model="pageSize"
                class="selectStyle"
                style
              />
              条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                this.allNum
              }}条记录)
            </span>
            <CPagination
              :activePage.sync="currentPage"
              :pages="total"
              align="end"
              v-if="total != 0"
            />
          </CCol>
        </CRow>
      </CCardFooter>-->
    </CCard>
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除任务类型"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除任务类型</span>
      </p>
      <div class="modalBody">
        <p>删除任务类型时与任务类型相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="delNodeShow"
      draggable
      scrollable
      title="删除节点任务类型"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除节点任务类型</span>
      </p>
      <div class="modalBody">
        <p>删除节点任务类型时与任务类型相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delNodeCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delNodeOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="addShow"
      draggable
      scrollable
      title="新建任务类型"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">新建任务类型</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="任务类型编码"
              placeholder="请输入任务类型编码"
              horizontal
              v-model="addData.code"
            />
            <CInput
              label="任务类型名称"
              placeholder="请输入任务类型名称"
              horizontal
              v-model="addData.name"
            />
            <!-- <CInput label="备注" placeholder="请输入备注" horizontal v-model="addData.memo" /> -->
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateShow"
      draggable
      scrollable
      title="更新任务类型"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">更新任务类型</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="任务类型编码"
              placeholder="请输入任务类型编码"
              horizontal
              v-model="upData.code"
            />
            <CInput
              label="任务类型名称"
              placeholder="请输入任务类型名称"
              horizontal
              v-model="upData.name"
            />
            <!-- <CInput label="备注" placeholder="请输入备注" horizontal v-model="upData.memo" /> -->
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="productionLineModal"
      draggable
      scrollable
      title="生产线选择"
      :width="800"
    >
      <p slot="header" class="modalHeader">生产线选择</p>
      <CRow>
        <CCol md="6" class="selectProLine-col">
          <div class="productionLine-treeDiv-left">
            <ul id="productionLineTree" class="ztree customStyleZtree"></ul>
          </div>
        </CCol>
        <CCol md="6">
          <div class="productionLine-treeDiv-right">
            <div>
              <!-- <CDataTable
                :key="selectProductlionLineData"
                :items="selectProductlionLineData"
                :fields="productionFields"
                border
                hover
              ></CDataTable>-->

              <Table
                border
                :columns="getColumn"
                :data="selectProductlionLineData"
                class="taskType-productionLine-table"
              >
                <!-- <template slot="action" slot-scope="{ row }">
                  <CButton
                    v-c-tooltip="'日志'"
                    title="日志"
                    variant="outline"
                    color="info"
                    size="sm"
                    @click="getTaskDetailLogNew(taskId,row)"
                  >
                    <CIcon name="cil-bug" />
                  </CButton>
                </template>-->
              </Table>
            </div>
          </div>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="getCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="saveProductLine" color="info" class="system-btn-style"
          >保存</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:80px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "名称",
    key: "name",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "编码",
    key: "code",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  // {
  //   label: "备注",
  //   key: "memo",
  //   _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
  //   align: "center",
  // },
  // {
  //   label: "创建时间",
  //   key: "createTime",
  //   _style: "width:170px;text-align: center;background:rgba(241,244,249,1);",
  //   align: "center",
  // },
  {
    key: "show_details",
    label: "操作",
    _style: "width:240px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import TableList from "@/template/table/TableList";

const productionFields = [
  {
    key: "id",
    label: "序号",
    _style: "width:60px;text-align:center",
    align: "center",
  },
  {
    key: "name",
    label: "生产线",
    _style: "width:auto;text-align:center",
    align: "center",
  },
];

export default {
  name: "taskTypeManage",
  components: { TableList },
  data() {
    return {
      isSameLevel: false, //添加同级
      isDeleteTreeNode: false,
      modalStyle: { top: "340px" },
      productionFields,
      selectProductlionLineData: [],
      selectTreeId: 0,
      delShow: false,
      delNodeShow: false,
      productionLineModal: false,
      updateShow: false,
      addShow: false,
      loading: true,
      data: [],
      fields,
      clickId: -1,
      currentPage: 1,
      pages: 0,
      total: 0,
      allNum: 0,
      select: "processmodel",
      pageSize: 15,
      taskTypeTreeData: [],
      productionLineTreeData: [],

      name: "",
      addData: {
        code: "",
        name: "",
        memo: "",
        pId: "",
      },
      upData: {
        code: "",
        name: "",
        memo: "",
        pId: "",
      },

      getColumns: [
        {
          title: "名称",
          key: "name",
          className: "centerText",
        },
        {
          title: "编码",
          key: "code",
          className: "centerText",
        },
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          className: "centerText",
          width: 320,
        },
      ],
      getAxios: {
        url: this.$api.manageApi.getAllTaskType, //请求路径
        method: "get", //请求方式
        dataList: { pId: 2 }, //请求参数
      },
    };
  },
  computed: {
    getColumn() {
      return [
        {
          key: "id",
          title: "序号",
          align: "center",
          width: "80px",
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  style: {
                    display: "inline-block",
                    width: "100%",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  },
                  domProps: {
                    title: params.row.id,
                  },
                  props: {
                    color: "info",
                    variant: "outline",
                  },
                },
                params.row.id
              ),
            ]);
          },
        },

        {
          key: "name",
          title: "生产线",
          align: "center",
          width: "auto",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "inline-block",
                  width: "100%",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                },
                domProps: {
                  title: params.row.name,
                },
                props: {
                  color: "info",
                  variant: "outline",
                },
              },
              params.row.name
            );
          },
        },
      ];
    },
  },
  mounted() {
    this.getTaskTypeTree();
    //this.getTaskTypeByPId(2);
  },
  methods: {
    /**
     * 获取每页对应的value值，并转为数值型
     */
    getVendorId(event) {
      let tempdata = event.target.value;
      this.pageSize = parseInt(tempdata);
    },
    /**
     * 点击查看按钮，显示弹窗，获取id和val值
     */
    lookProductionLine(val) {
      this.clickId = val.id;
      this.getAllTaskTypeByPid(val.id);
    },

    /**
     * 点击取消按钮，关闭弹窗
     */
    getCancel() {
      this.productionLineModal = false;
      this.selectProductlionLineData = [];
    },
    /**
     * 点击保存按钮，关闭弹窗
     */
    saveProductLine() {
      let _this = this;
      this.productionLineModal = false;
      let path = _this.$api.manageApi.taskTypeFlowBind;
      let proLineIdList = [];
      _this.selectProductlionLineData.forEach((ele) => {
        if (ele.type === "flow") {
          proLineIdList.push(ele.id);
        }
      });

      let param = {
        proLineIdList: proLineIdList,
        taskTypeId: _this.clickId,
      };
      _this.http.post(path, param).then((res) => {
        if (res.data.code === 0 && res.data.success) {
          _this.$Message.success("保存成功");
        } else {
          _this.$Message.error(res.data.message);
        }
      });
    },
    /**
     * 表格点击编辑按钮，显示弹窗，获取id和val值
     */
    update(val) {
      this.updateShow = true;
      this.clickId = val.id;
      this.upData = JSON.parse(JSON.stringify(val)); //deep copy
    },
    /**
     * 表格点击删除按钮，显示弹窗，获取id值
     */
    del(id) {
      this.delShow = true;
      this.clickId = id;
    },
    /**
     * 点击删除树节点按钮，显示弹窗，获取此id值
     */
    delTreeNode() {
      this.delNodeShow = true;
      // let treeObj = $.fn.zTree.getZTreeObj("taskTypeTree");
      // this.selectTreeId = treeObj.getSelectedNodes()[0].id;
    },
    /**
     * 点击增加任务类型按钮，显示弹窗
     */
    addCatalog() {
      this.addShow = true;
    },
    delOk() {
      let self = this;
      this.delShow = false;
      if (!self.clickId) {
        this.$Message.warning("请先选择要删除的数据");
        return;
      }
      let path = this.$api.manageApi.deleteTaskType + self.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getTaskTypeTree();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    delCancel() {
      this.delShow = false;
    },
    delNodeCancel() {
      this.delNodeShow = false;
    },
    delNodeOk() {
      let _this = this;
      this.delNodeShow = false;

      if (_this.selectTreeId === 0) {
        this.$Message.warning("不能删除根节点");
        return;
      }
      let path = this.$api.manageApi.deleteTaskType + _this.selectTreeId;
      this.http.delete(path).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          //删除子节点时 设置父节点选中；一级节点删除后 选中的节点设置为根节点selectTreeId=0；
          let treeObj = $.fn.zTree.getZTreeObj("taskTypeTree");
          let node = treeObj.getNodeByParam("id", _this.selectTreeId);
          if (node.pId) {
            _this.selectTreeId = node.pId;
          } else {
            this.selectTreeId = 0;
          }
          _this.getTaskTypeTree();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    addSameTreeNode() {
      this.isSameLevel = true;
      this.addShow = true;
    },
    addTreeNode() {
      this.isSameLevel = false;
      this.addShow = true;
    },
    addOk() {
      let self = this;
      let path = this.$api.manageApi.taskTypeCreate;
      if (self.selectTreeId == null) {
        this.$Message.error("请选择父节点");
        return;
      }

      if (this.isSameLevel) {
        //同级
        let treeObj = $.fn.zTree.getZTreeObj("taskTypeTree");
        if (!treeObj && treeObj.getSelectedNodes().length < 1) return;

        let parentId = treeObj.getSelectedNodes()[0].pId;
        self.addData.pId = parentId ? parentId : 0;
      } else {
        //子级
        self.addData.pId = self.selectTreeId;
      }

      let param = self.addData;
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getTaskTypeTree();
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.addShow = false;
      self.addData = {
        code: "",
        name: "",
        memo: "",
        pId: "",
      };
    },
    addCancel() {
      this.addShow = false;
    },
    updateOk() {
      let self = this;
      let path = this.$api.manageApi.updateTaskType + self.clickId;
      let param = self.upData;
      this.http.post(path, param).then((res) => {
        this.updateShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);

          self.getTaskTypeTree();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    updateCancel() {
      this.updateShow = false;
    },
    getTaskTypeTree() {
      let self = this;
      self.taskTypeTreeData = [];
      let path = this.$api.manageApi.getAllTaskType;

      this.http.get(path).then((res) => {
        self.loading = false;
        if (res.data.success) {

          self.taskTypeTreeData = res.data.data.dataList;

          // 实现的效果非常奇怪，当删除只有一条数据时 刷新左侧树
          if (self.taskTypeTreeData.length < 1){$.fn.zTree.init($("#taskTypeTree"), setting, []);return;}


          if (self.selectTreeId === 0) {
            //修改初始化设置id为树节点索引为0的id(因为当前树节点没有id为0的数据)
            self.selectTreeId = self.taskTypeTreeData[0].id;
          }
          if (self.selectTreeId) {
            let index = 0;
            index = self.findIndex(self.taskTypeTreeData);
            self.name = self.taskTypeTreeData[index].title;
            self.taskTypeTreeData[index].open = true;
            self.getTaskTypeByPId(self.selectTreeId);
          }

          let setting = {
            data: {
              simpleData: {
                enable: true,
              },
            },
            view: {
              showLine: false,
              showIcon: false,
              selectedMulti: false, //不可以多选
            },
            callback: {
              onClick: this.zTreeOnClick,
            },
          };

          let treeObj = $.fn.zTree.init(
            $("#taskTypeTree"),
            setting,
            self.taskTypeTreeData
          );
          let node = treeObj.getNodesByParam("id", self.selectTreeId, null);
          treeObj.selectNode(node[0]);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    findIndex(data) {
      let index = 0;
      for (let i = 0; i < data.length; i++) {
        if (data[i].id === this.selectTreeId) {
          index = i;
          break;
        }
      }
      return index;
    },

    zTreeOnClick(event, treeId, treeNode) {
      let _this = this;
      _this.selectTreeId = treeNode.id;
      _this.name = treeNode.name;

      this.getTaskTypeByPId(_this.selectTreeId);
    },
    getAllTaskTypeByPid(pId) {
      let _this = this;
      let path = _this.$api.manageApi.getAllTaskType;
      let param = {
        pId: pId,
      };
      _this.http.get(path, param).then((res) => {
        if (res.data.success == true) {
          // self.data = res.data.data.dataList;
          let total = res.data.data.total;
          if (total > 1) {
            _this.$Message.warning("不能对文件夹进行生产线选择");
            return;
          } else {
            _this.productionLineModal = true;
            _this.getProductionLineTree();
          }
        }
      });
    },
    /**
     * 分页功能实现
     */
    getTaskTypeByPId(parentId) {
      let self = this;

      let pageSize = this.pageSize;
      self.data = [];
      let path = self.$api.manageApi.getAllTaskType;
      let param = {
        pId: parentId,
        pageSize: pageSize,
        pageNum: self.currentPage,
      };

      let getAxiosData = {
        method: "get",
        url: path,
      };
      self.$refs.table.getRefreshTable(param, getAxiosData);

      /* self.http.get(path, param).then((res) => {
        if (res.data.success == true) {
          self.data = res.data.data.dataList;
          self.allNum = res.data.data.total;
          self.total = Math.ceil(res.data.data.total / self.pageSize);
          for (let i = 0; i < self.data.length; i++) {
            self.data[i].number =
              (self.currentPage - 1) * self.pageSize + i + 1;
          }
        } else {
          self.$Message.error(res.data.message);
        }
      });*/
    },

    getProductionLineTree() {
      let _this = this;
      _this.productionLineTreeData = [];
      let path = this.$api.manageApi.getRoleProductLine;
      let param = {
        taskTypeId: this.clickId,
      };
      _this.http.get(path, param).then((res) => {
        _this.loading = false;

        if (res.data.success) {
          _this.productionLineTreeData = res.data.data;
          let setting = {
            check: {
              enable: true,
              nocheckInherit: false,
              chkboxType: { Y: "s", N: "ps" }, //级联  //{ Y: "", N: "" },
            },
            data: {
              simpleData: {
                enable: true,
              },
            },
            view: {
              showLine: false,
              showIcon: false,
              // addDiyDom: this.addDiyDom, //自定义
            },
            callback: {
              // onClick: this.zTreeProductLineOnClick,
              onCheck: this.zTreeOnCheck,
            },
          };
          $.fn.zTree.init(
            $("#productionLineTree"),
            setting,
            _this.productionLineTreeData
          );
          _this.getSelectedNodesOfProductionLine("productionLineTree");
        } else {
          _this.$Message.error(res.data.message);
        }
      });
    },

    zTreeOnCheck(event, treeId, treeNode) {
      let _this = this;
      _this.getSelectedNodesOfProductionLine(treeId);
    },

    getSelectedNodesOfProductionLine(treeId) {
      let _this = this;
      _this.selectProductlionLineData = [];
      let treeObj = $.fn.zTree.getZTreeObj(treeId);
      var nodes = treeObj.getCheckedNodes();

      nodes.forEach((element) => {
        if (element.children == null || element.children.length < 1) {
          if (element.type === "flow") {
            _this.selectProductlionLineData.push({
              name: element.name,
              id: element.id,
              type: element.type,
            });
          } else {
            element.checked = false;
            treeObj.updateNode(element);
          }
        }
      });
    },

    // //添加自定义样式函数
    // addDiyDom(treeId, treeNode) {
    //   var switchObj = $("#" + treeNode.tId + "_switch"),
    //     checkObj = $("#" + treeNode.tId + "_check");
    //   checkObj.addClass("button-check");
    //   checkObj.attr("spFolder", true);
    // },

    zTreeProductLineOnClick(event, treeId, treeNode) {
      let _this = this;
      // _this.name = treeNode.name;
    },
  },
  watch: {
    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getTaskTypeByPId(this.selectTreeId);
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getTaskTypeByPId(this.selectTreeId);
    },
  },
};
</script>
<style scoped>
.selectProLine-col {
  border-right: 1px solid #d8dbe0;
}
.col-md-2 {
  padding-right: 10px;
  padding-left: 20px;
}
.col-md-10 {
  padding-right: 20px;
  padding-left: 0px;
}
.manageBtn {
  border-bottom: 1px solid #d8d8d8;
  margin-top: 15px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-evenly;
}

::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
}
.dic_tree {
  max-width: 230px;
  overflow-y: auto;
  height: 100%;
}

/* 分页 */
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: black;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}

.productionLine-treeDiv-left {
  max-height: 500px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: -16px;
  margin-right: -16px;
}
.productionLine-treeDiv-right {
  max-height: 500px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: -16px;
  margin-right: -18px;
}
.userTitle {
  margin-bottom: 0 !important;
  margin-top: 5px;
}
.max-hight {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}
.max-hight ::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
}
.taskTypeManage {
  height: 100%;
  overflow-y: auto;
}
.taskType-productionLine-table {
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  height: 100%;
}

/* .taskType-productionLine-table > tr > td {
  height: 40px;
  text-align: center;
} */
</style>


<style scoped>
.taskType-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}

.menmuStyle {
  height: 100%;
}
.imageControl-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}

.ztree {
  margin: 0;
  padding: 0;
}
.rightCard {
  width: 80%;
  margin-left: 10px;
  flex: 1;
}
.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}

.rightCard .max-hight {
  overflow-y: auto;
  height: calc(100% - 40px) !important;
  padding: 20px 20px 18px 20px !important;
}

/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}
.onButton:hover {
  color: white;
}
/deep/ footer.page-link:hover {
  background-color: #ffffff;
}
</style>
